<template>
  <div class="product-edit">
    <h2>编辑产品信息</h2>
    <p>产品 ID: {{ $route.query.id }}</p>
    <!-- 编辑表单将放在这里 -->
    <el-form ref="form" :model="productData" label-width="120px">
      <el-form-item label="产品名称">
        <el-input v-model="productData.name"></el-input>
      </el-form-item>
      <el-form-item label="产品描述">
        <el-input type="textarea" v-model="productData.description"></el-input>
      </el-form-item>
      <!-- 其他表单项 -->
      <el-form-item>
        <el-button type="primary" @click="saveProduct">保存</el-button>
        <el-button @click="goBack">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'ProductEdit',
  data() {
    return {
      productData: {
        id: null,
        name: '',
        description: ''
        // 其他产品属性
      }
    };
  },
  created() {
    // 在组件创建时获取路由参数中的产品ID，并加载产品数据
    const productId = this.$route.query.id;
    if (productId) {
      this.productData.id = productId;
      this.loadProductData(productId);
    }
  },
  methods: {
    loadProductData(id) {
      // TODO: 实现从后端加载产品数据的逻辑
      console.log(`加载 ID 为 ${id} 的产品数据...`);
      // 假设加载成功后更新 productData
      // this.productData = fetchedData;
    },
    saveProduct() {
      // TODO: 实现保存产品数据的逻辑
      console.log('保存产品数据:', this.productData);
      // 保存成功后可以跳转回列表页或详情页
      // this.$router.push('/product');
    },
    goBack() {
      this.$router.go(-1); // 返回上一页
    }
  }
};
</script>

<style scoped>
.product-edit {
  padding: 20px;
  background-color: #fff;
}
h2 {
  margin-bottom: 20px;
}
</style>